<template>
  <el-container>
    <el-main>
      <el-card style="margin-bottom: 20px">
        <h3>津贴余额</h3>
        <p style="font-size: 20px">￥ {{allowance}}</p>
        <el-col :span='12' style="color:red;font-size: 12px">津贴可与满减和红包叠加使用</el-col>
        <el-col :span='12' style="text-align: right;font-size: 12px;">有效期至{{date}}</el-col>
      </el-card>
      <el-card shadow="never" v-for="i in 8" :key="i">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-image
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
          </el-col>
          <el-col :span="15">
            <h3 style="margin:0;font-size:18px">店铺名称</h3>
            <p>起送 ￥10 免配送费 月售9999+ 2.69km</p>
            <p style="background-color: #fcc;color:red">本店可用 津贴2元</p>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "Allowance",
        data() {
            return {
                allowance: 20,
                date: '2019-10-25'
            }
        },
        methods: {
        }
    }
</script>

<style scoped>
  p {
    padding: 0;
    font-size: 12px;
  }
</style>
